<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax天气预报</title>
    <style>
        html {
            text-align: center;
        }
        
        body {
            background: linear-gradient(#156EBF, #6CA9DE);
            background-repeat: no-repeat;
        }
        
        main {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        
    </style>
</head>

<body>
    <select id="province"></select>
    <select id="city"></select>
    <select id="county"></select>
    <script src="js/jquery.js"></script>
    <script src="js/address.js"></script>
    <script src="js/index.js"></script>
    <script>
        $('#county').on('change', function (e) {
            var param = {
                location: $('#county').val(),
                output: 'json',
                ak: 'iw5m2G7ayDow8ofDdDGVUMB3'
            }
            $.getJSON('http://api.map.baidu.com/telematics/v3/weather?callback=?', param, function (res) {
                console.dir(res)

                weatherList(res)
                $('<main></main>').appendTo($('body'))
                var arrWeather = res.results[0].weather_data
                var htmlStr = ''
                for (var i = 1; i < 4; i++) {
                    htmlStr += `
                            <div>
                                <h5>${arrWeather[i].date}</h5>
                                <img src="${pic(arrWeather[i])}" alt="没找到">
                                <p>${arrWeather[i].temperature}</p>
                                <p>${arrWeather[i].weather}</p>
                                <p>${arrWeather[i].wind}</p>
                            </div>
                         `
                }
                $(htmlStr).appendTo($('main'))
            })
        })

        function weatherList(data) {
            var str = ''
            str += `<div>
                        <h4>${data.results[0].currentCity}</h4>
                        <img src="${pic(data.results[0].weather_data[0])}" alt="没找到">
                        <p>${data.results[0].weather_data[0].temperature}</p>
                        <p>${data.results[0].weather_data[0].weather}</p>
                        <p>${data.results[0].weather_data[0].wind}</p>
                        <p>${rtt(data)}空气指数:${data.results[0].pm25}${aqi(data)}</p>
                    </div>
                   `
            $(str).appendTo($('body'))
        }
        function rtt(tem) {
            var strT = tem.results[0].weather_data[0].date.split('').splice(14, 2)
            var str = '实时温度：' + strT[0] + strT[1] + '℃,'
            return str
        }
        function aqi(data) {
            var num = data.results[0].pm25
            return num < 35 ? '优' : num < 75 ? '良' : num < 115 ? '轻度污染' : num < 150 ? '中度污染' : num < 250 ? '重度污染' : '严重污染'
        }
        function pic(data) {
            var now = new Date()
            var hour = now.getHours()
            var str = ''
            if (hour >= 6 && hour <= 18) {
                var arr = data.dayPictureUrl.split('/')
                str = 'days/' + arr[arr.length - 1]
            } else {
                var arr = data.nightPictureUrl.split('/')
                str = 'nights/' + arr[arr.length - 1]
            }
            return str
        }


        // 下面三项
    </script>
</body>

</html>